window.addEventListener('load', function () {
    // swiper插件 js
    var swiper = new Swiper('.swiper-container', {
        centeredSlides: true,
        autoplay: {
            delay: 2000,
            disableOnInteraction: false,
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        }
    });
    // 鼠标移入停止播放
    $('.swiper-slide').mouseenter(function () { swiper.autoplay.stop(); })
    $('.swiper-slide').mouseleave(function () { swiper.autoplay.start(); })

    // 懒加载 js
    lazyLoadInit({
        coverDiv: `<img src="./uploads/yj.jpg" alt="">`,
        showTime: 1400,
        // onLoadBackEnd: function (i, e) {
        //     console.log("onLoadBackEnd:" + i);
        // }
        // , onLoadBackStart: function (i, e) {
        //     console.log("onLoadBackStart:" + i);
        // }
    });

    // 关注取消关注模块
    $(".follow_btn").on("click", function () {
        if ($(this).text() === "关注") {
            $(this).text("已关注")
            $(this).css("background", "#ccc")
            $(this).css('transform', 'rotate(11900deg)');
            $(this).css('transition', 'all .4s linear')
        } else {
            if (confirm("您确定取消关注吗？")) {
                $(this).text("关注")
                $(this).css("background", "#f8cf39")
                $(this).css('transform', 'rotate(0deg)');
                $(this).css('transition', 'all .4s linear')
            }
        }
    })


    // 搜藏喜欢模块
    $(".painter_num .painter_num_item i").on("click", function () {
        // 判断条件 字体颜色
        if ($(this).css("color") !== "rgb(255, 0, 0)") {
            $(this).css("color", "red");
            console.log($(this).css("color"))
            var num = parseInt($(this).siblings('span').text());
            $(this).siblings('span').text(num + 1);

        } else {
            $(this).css("color", "#ccc");
            // console.log($(this).css("color"))
            var num = parseInt($(this).siblings('span').text());
            $(this).siblings('span').text(num - 1);
        }
    })
    // 关注模块
    $('.icon-friendaddfill:nth-child(1)').on('click', function () {
        var color = $('.icon-friendaddfill:nth-child(1)').css('color');
        $('.icon-friendaddfill:nth-child(2)').css('color', color)
        $('.icon-friendaddfill:nth-child(2)').css('display', 'block');
        $('.icon-friendaddfill:nth-child(2)').animate({
            fontSize: 40,
            top: -15,
            left: -10
        }, 500, function () {
            $('.icon-friendaddfill:nth-child(2)').animate({
                fontSize: 18,
                top: 2,
                left: 0
            }, 500, function () {
                $('.icon-friendaddfill:nth-child(2)').css('display', 'none')
            })
        })
    })

    // 点击爱心时 调用动画函数
    $(".painter_num .painter_num_item:nth-child(2) i").on("click", function () {
        if ($(this).css("color") == "rgb(255, 0, 0)") {
            $('.icon-likefill:nth-child(n+2)').css('display', 'block');
            likeRight(2, 30, 8);
            likeRight(3, 35, 29);
            likeLeft(4, -28, 5);
            likeLeft(5, -23, 40);
            // 上面的
            likeTop(6, 7, -30);
        }
    })
    // 爱心特效函数***********************************
    function likeLeft(num, left, top) {
        $('.icon-likefill:nth-child(' + num + ')').animate({
            left: left,
            top: top,
            opacity: 1,
            fontSize: 18
        }, 500, function () {
            $('.icon-likefill:nth-child(' + num + ')').animate({
                left: left,
                top: top
            }, 249, function () {
                $('.icon-likefill:nth-child(' + num + ')').animate({
                    left: (left - 10),
                    top: (top - 40),
                    opacity: 0,
                    fontSize: 0
                }, 800, function () {
                    $('.icon-likefill:nth-child(' + num + ')').animate({
                        top: 6,
                        left: 6
                    }, 10);
                    $('.icon-likefill:nth-child(' + num + ')').css('display', 'none')
                })
            })
        })
    }
    // 爱心特效函数***********************************
    function likeRight(num, left, top) {
        $('.icon-likefill:nth-child(' + num + ')').animate({
            left: left,
            top: top,
            opacity: 1,
            fontSize: 18
        }, 500, function () {
            $('.icon-likefill:nth-child(' + num + ')').animate({
                left: left,
                top: top
            }, 249, function () {
                $('.icon-likefill:nth-child(' + num + ')').animate({
                    left: (left + 10),
                    top: (top - 40),
                    opacity: 0,
                    fontSize: 0
                }, 800, function () {
                    $('.icon-likefill:nth-child(' + num + ')').animate({
                        top: 6,
                        left: 6
                    }, 10);
                    $('.icon-likefill:nth-child(' + num + ')').css('display', 'none')
                })
            })
        })
    }
    // 爱心特效函数***********************************
    function likeTop(num, left, top) {
        $('.icon-likefill:nth-child(' + num + ')').animate({
            left: left,
            top: top,
            opacity: 1,
            fontSize: 18
        }, 500, function () {
            $('.icon-likefill:nth-child(' + num + ')').animate({
                left: left,
                top: top
            }, 249, function () {
                $('.icon-likefill:nth-child(' + num + ')').animate({
                    left: (left + 10),
                    top: (top - 20),
                    opacity: 0,
                    fontSize: 0
                }, 800, function () {
                    $('.icon-likefill:nth-child(' + num + ')').animate({
                        top: 6,
                        left: 6
                    }, 10);
                    $('.icon-likefill:nth-child(' + num + ')').css('display', 'none')
                })
            })
        })
    }


    // 点击星星时 调用动画函数
    $(".painter_num .painter_num_item:nth-child(3) .star i").on('click', function () {
        if ($(this).css("color") == "rgb(255, 0, 0)") {
            setFavor(2, -30, 0);
            setFavor(3, 30, 0);
            setFavor(4, 0, 30);
            setFavor(5, 0, -30);
        }
    })

    // 星星动画特效函数
    function setFavor(num, top, left) {
        $('.star').css('transition', 'all 1.6s linear');
        $('.star').css('transform', 'rotate(360deg)');
        $('.icon-favorfill:nth-child(' + num + ')').css('display', 'block')
        $('.icon-favorfill:nth-child(' + num + ')').stop().animate({
            top: top,
            left: left,
        }, 400, function () {
            $('.star').css('transform', 'rotate(645deg)');
            $('.icon-favorfill:nth-child(' + num + ')').animate({
                top: top,
                left: left,
            }, 800, function () {
                $('.icon-favorfill:nth-child(' + num + ')').animate({
                    top: 2,
                    left: 0,
                }, 400, function () {
                    $('.star').css('transition', 'all 0s linear');
                    $('.star').css('transform', 'rotate(0deg)');
                })
            })
        })
    }

    var username = ['药水哥s', 'giao桑', '孙笑川', 'ムアン', 'Eva', '葵 束@Skeb停止中', '药水哥s', '郭老师', 'giao桑', '孙笑川'];
    $('.painter_name').each(function (index, item) {
        $(item).text(username[index])
    });

    // 星空背景
    (function () {
        // 可调参数
        var BACKGROUND_COLOR = "rgba(0,43,54,1)";   // 背景颜色
        var POINT_NUM = 100;                        // 星星数目
        var POINT_COLOR = "rgba(255,255,255,0.7)";  // 点的颜色
        var LINE_LENGTH = 10000;                    // 点之间连线长度(的平方)

        // 创建背景画布
        var cvs = document.createElement("canvas");
        cvs.width = window.innerWidth;
        cvs.height = window.innerHeight;
        cvs.style.cssText = "\
    position:fixed;\
    top:0px;\
    left:0px;\
    z-index:-1;\
    opacity:1.0;\
    ";
        document.body.appendChild(cvs);

        var ctx = cvs.getContext("2d");

        var startTime = new Date().getTime();

        //随机数函数
        function randomInt(min, max) {
            return Math.floor((max - min + 1) * Math.random() + min);
        }

        function randomFloat(min, max) {
            return (max - min) * Math.random() + min;
        }

        //构造点类
        function Point() {
            this.x = randomFloat(0, cvs.width);
            this.y = randomFloat(0, cvs.height);

            var speed = randomFloat(0.3, 1.4);
            var angle = randomFloat(0, 2 * Math.PI);

            this.dx = Math.sin(angle) * speed;
            this.dy = Math.cos(angle) * speed;

            this.r = 1.2;

            this.color = POINT_COLOR;
        }

        Point.prototype.move = function () {
            this.x += this.dx;
            if (this.x < 0) {
                this.x = 0;
                this.dx = -this.dx;
            } else if (this.x > cvs.width) {
                this.x = cvs.width;
                this.dx = -this.dx;
            }
            this.y += this.dy;
            if (this.y < 0) {
                this.y = 0;
                this.dy = -this.dy;
            } else if (this.y > cvs.height) {
                this.y = cvs.height;
                this.dy = -this.dy;
            }
        }

        Point.prototype.draw = function () {
            ctx.fillStyle = this.color;
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
            ctx.closePath();
            ctx.fill();
        }

        var points = [];

        function initPoints(num) {
            for (var i = 0; i < num; ++i) {
                points.push(new Point());
            }
        }

        var p0 = new Point(); //鼠标
        p0.dx = p0.dy = 0;
        var degree = 2.5;
        document.onmousemove = function (ev) {
            p0.x = ev.clientX;
            p0.y = ev.clientY;
        }
        document.onmousedown = function (ev) {
            degree = 5.0;
            p0.x = ev.clientX;
            p0.y = ev.clientY;
        }
        document.onmouseup = function (ev) {
            degree = 2.5;
            p0.x = ev.clientX;
            p0.y = ev.clientY;
        }
        window.onmouseout = function () {
            p0.x = null;
            p0.y = null;
        }

        function drawLine(p1, p2, deg) {
            var dx = p1.x - p2.x;
            var dy = p1.y - p2.y;
            var dis2 = dx * dx + dy * dy;
            if (dis2 < 2 * LINE_LENGTH) {
                if (dis2 > LINE_LENGTH) {
                    if (p1 === p0) {
                        p2.x += dx * 0.03;
                        p2.y += dy * 0.03;
                    } else return;
                }
                var t = (1.05 - dis2 / LINE_LENGTH) * 0.2 * deg;
                ctx.strokeStyle = "rgba(255,255,255," + t + ")";
                ctx.beginPath();
                ctx.lineWidth = 1.5;
                ctx.moveTo(p1.x, p1.y);
                ctx.lineTo(p2.x, p2.y);
                ctx.closePath();
                ctx.stroke();
            }
            return;
        }

        //绘制每一帧
        function drawFrame() {
            cvs.width = window.innerWidth;
            cvs.height = window.innerHeight;
            ctx.fillStyle = BACKGROUND_COLOR;
            ctx.fillRect(0, 0, cvs.width, cvs.height);

            var arr = (p0.x == null ? points : [p0].concat(points));
            for (var i = 0; i < arr.length; ++i) {
                for (var j = i + 1; j < arr.length; ++j) {
                    drawLine(arr[i], arr[j], 1.0);
                }
                arr[i].draw();
                arr[i].move();
            }

            window.requestAnimationFrame(drawFrame);
        }

        initPoints(POINT_NUM);
        drawFrame();
    })();
    // ******************************************************
    // 返回顶部
    jQuery(document).ready(function ($) {
        // browser window scroll (in pixels) after which the "back to top" link is shown
        var offset = 300,
            //browser window scroll (in pixels) after which the "back to top" link opacity is reduced
            offset_opacity = 1200,
            //duration of the top scrolling animation (in ms)
            scroll_top_duration = 700,
            //grab the "back to top" link
            $back_to_top = $('.cd-top');

        //hide or show the "back to top" link
        $(window).scroll(function () {
            ($(this).scrollTop() > offset) ? $back_to_top.addClass('cd-is-visible') : $back_to_top.removeClass('cd-is-visible cd-fade-out');
            if ($(this).scrollTop() > offset_opacity) {
                $back_to_top.addClass('cd-fade-out');
            }
        });

        //smooth scroll to top
        $back_to_top.on('click', function (event) {
            event.preventDefault();
            $('body,html').animate({
                scrollTop: 0,
            }, scroll_top_duration
            );
        });

    });
    // ******************************************************
    // 点击图片
    $('img').on('click', function () {
        $('.dnm').css('display', 'block');
        $('.dnm span').html('马上就写 别催');
    })
    $('img').on('contextmenu', function (e) {
        $('.dnm span').html('别点了，要我哭吗');
        $('.dnm').css('display', 'block');
        e.preventDefault();
    })
    $('.sxc').on('click', function () {
        $('.dnm').css('display', 'block');
        $('.dnm span').html(`<img src="./uploads/nihou.jpg" alt="">`);
    })
    // 药水歌
    $('.ysg').on('click', function () {
        $('.dnm').css('display', 'block');
        $('.dnm span').html(`<audio  autoplay="autoplay" loop id="ysg">
        <source src="./music/ysg.mp3" type="audio/mp3" />
    </audio>
    <img src="./uploads/ysg.jpg" alt="">`);
        $('#ysg').play();
    })
    // giao
    $('.giao').on('click', function () {
        $('.dnm').css('display', 'block');
        $('.dnm span').html(`<audio  autoplay="autoplay" loop id="giao">
        <source src="./music/giao.mp3" type="audio/mp3" />
    </audio>
    <img src="./uploads/giao.jpg" alt="">`);
        $('#giao').play();
    })
    // sxc
    $('.sxc').on('click', function () {
        $('.dnm').css('display', 'block');
        $('.dnm span').html(`<audio  autoplay="autoplay" loop id="sxc">
        <source src="./music/sxc.mp3" type="audio/mp3" />
    </audio>
    <img src="./uploads/sxc.jpg" alt="">`);
        $('#sxc').play();
    })
    $('.dnm').on('click', function () {
        $(this).css('display', 'none');
        $('.dnm span').html('马上就写 别催');
    })
    // 冒泡
    class BGBubble {
        constructor(opts) {
            this.defaultOpts = {
                id: '',                           //容器ID
                num: 100,                        // 个数
                start_probability: 0.1,          // 如果数量小于num，有这些几率添加一个新的
                radius_min: 1,                   // 初始半径最小值
                radius_max: 2,                   // 初始半径最大值
                radius_add_min: .3,               // 半径增加最小值
                radius_add_max: .5,               // 半径增加最大值
                opacity_min: 0.3,                 // 初始透明度最小值
                opacity_max: 0.5,                // 初始透明度最大值
                opacity_prev_min: .003,            // 透明度递减值最小值
                opacity_prev_max: .005,            // 透明度递减值最大值
                light_min: 40,                 // 颜色亮度最小值
                light_max: 70,                 // 颜色亮度最大值
                is_same_color: false          //泡泡颜色是否相同
            }
            if (Object.prototype.toString.call(opts) == "[object Object]") {
                this.userOpts = { ...this.defaultOpts, ...opts }
            } else {
                this.userOpts = { ...this.defaultOpts, id: opts }
            }
            this.color = this.random(0, 360)
            this.bubbleNum = []
            this.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                window.webkitRequestAnimationFrame || window.msRequestAnimationFrame
            this.cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame
        }

        random(a, b) {
            return Math.random() * (b - a) + a    //取a-b之间的随机值
        }

        initBubble(color, isSameColor) {
            const width = window.innerWidth
            const height = window.innerHeight
            const userOpts = this.userOpts
            const light = this.random(userOpts.light_min, userOpts.light_max)
            this.bubble = {
                x: this.random(0, width),
                y: this.random(0, height),
                radius: this.random(userOpts.radius_min, userOpts.radius_max),
                radiusChange: this.random(userOpts.radius_add_min, userOpts.radius_add_max),
                opacity: this.random(userOpts.opacity_min, userOpts.opacity_max),
                opacityChange: this.random(userOpts.opacity_prev_min, userOpts.opacity_prev_max),
                light,
                color: `hsl(${isSameColor ? color : this.random(0, 360)},100%,${light}%)`,
            }
        }

        bubbling(ctx, color, isSameColor) {
            !this.bubble && this.initBubble(color, isSameColor)
            const bubble = this.bubble
            ctx.fillStyle = bubble.color;
            ctx.globalAlpha = bubble.opacity;
            ctx.beginPath();
            ctx.arc(bubble.x, bubble.y, bubble.radius, 0, 2 * Math.PI, true);
            ctx.closePath();
            ctx.fill();
            ctx.globalAlpha = 1;
            bubble.opacity -= bubble.opacityChange;
            bubble.radius += bubble.radiusChange;
            if (bubble.opacity <= 0) {
                this.initBubble(color, isSameColor)
                return
            }
        }

        createCanvas() {
            this.canvas = document.createElement('canvas')
            this.ctx = this.canvas.getContext('2d')
            this.canvas.style.display = 'block'        //防止全屏的canvas出现滚动条
            this.canvas.width = window.innerWidth
            this.canvas.height = window.innerHeight
            this.canvas.style.position = 'fixed'
            this.canvas.style.top = '0'
            this.canvas.style.left = '0'
            this.canvas.style.zIndex = '-1'
            document.getElementById(this.userOpts.id).appendChild(this.canvas)
            window.onresize = () => {
                this.canvas.width = window.innerWidth
                this.canvas.height = window.innerHeight
            }
        }

        start() {
            const width = window.innerWidth
            const height = window.innerHeight
            this.color += 0.1
            this.ctx.fillStyle = `hsl(${this.color},100%,97%)`
            this.ctx.fillRect(0, 0, width, height);
            if (this.bubbleNum.length < this.userOpts.num && Math.random() < this.userOpts.start_probability) {
                this.bubbleNum.push(new BGBubble())
            }
            this.bubbleNum.forEach(bubble => bubble.bubbling(this.ctx, this.color, this.userOpts.is_same_color))
            const requestAnimationFrame = this.requestAnimationFrame
            this.myReq = requestAnimationFrame(() => this.start())   //新的动画API可根据浏览设置最佳动画间隔时间
        }

        destory() {
            const cancelAnimationFrame = this.cancelAnimationFrame
            cancelAnimationFrame(this.myReq)
            window.onresize = null
        }

    }

    const bubbleDemo = new BGBubble('bubble')
    bubbleDemo.createCanvas()
    bubbleDemo.start()

    $('.close').on('click', function () {
        $('.footer-bottom').css('display', 'none');
    })

})